<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
  	<meta name="viewport" content="width=1920,user-scalable=no"> 
	<title>quiz</title>
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/quiz.css" type="text/css">
	<script src="js/touchEvent.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/snap.svg-min.js"></script>
	<script src="js/template.js"></script>
</head>

<body>
	<div class="outwrap">
		<svg id="canvas">
		</svg>
		<div class="quiz">
			<div class="content">
				<div class="head center">
					<div class="q-description">
					</div>
					<div class="countdown">
						00:<span id="cd"></span>
					</div>
					<a class="nextquiz" style="position:absolute;top:60px;right:0;">
						<img src="images/t-6.png" width="">
					</a>
				</div>
				<div class="body">
					<div class="list-wrap">
					<script type="text/html" id="tpl">
						<ul class="q-list">
							{{each items as item}}
								<li class="q-li" style="width:880px;">
									<div class="item" style="width:630px" uid="{{ item.id }}" role="question">
										<span class="item-text">{{item.question}}</span>
									</div>
									<span class="disk l"></span>
								</li>
							{{/each}}
						</ul>
						<ul class="q-list">
							{{each answers as answer}}
								<li class="q-li">
									<span class="disk r"></span>
									<div class="item" uid="{{ answer.id }}" role="answer">
										<span class="item-text">{{answer.answer}}</span>
									</div>
								</li>
							{{/each}}
						</ul>
					</script>
					</div>
				</div>
				<div class="board">
					回答<span id="sum"></span>道 / 正确<span id="pass"></span>道
				</div>
			</div>
		</div>
		<div class="result">
			<div class="content">
				<div class="head center">
					<img src="images/t-4.png" width="190" style="padding-top:8px">
					<a class="restart" style="position:absolute;top:60px;right:0;" width="170">
						<img src="images/t-2.png">
					</a>
				</div>
				<div class="body">
					<div class="winquiz">
						恭喜您，游戏胜出！<br>
						请在工作人员引导下兑换奖品，感谢您的参与！
					</div>
					<div class="losequiz">
						很抱歉，游戏失败！<br>
						不要灰心，再接再厉，感谢您的参与！
					</div>
				</div>
			</div>
		</div>
		<div class="ready" style="">
			<div class="content">
				<div class="head center">
					<img src="images/t-4.png" class="" width="190" style="padding-top:8px">
				</div>
				<div class="body">
					<ul class="infolist">
						<li>1. 屏幕左边为连连看的问题，右边为答案选项。每道题目共有五组配对。</li>
						<li>2. 参与者首先点击问题，然后再选择该问题的答案。系统自动连线。每道题目答题时间为25秒。</li>
						<li>3. 五组配对连线全部正确视为答对一题。有一组配对及以上连线错误者、超时均判为答题错误。</li>
						<li>4. 本游戏采取五局三胜制度。答题错误累积三题者宣布失败。正确累积三题者宣布胜利。</li>
						<li>5. 获胜的参赛者可以向工作人员兑换精美小礼品。</li>
					</ul>
					<div class="center">
						<a class="quiz-begin dib" style="margin-top:150px;">
							<img src="images/t-5.png" style="">
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/data.js"></script>
	<script src="js/quiz.js"></script>
</body>
</html>
